<template>
    <div id="shopInfo">
        <div>
            <img :src="shopInfo.shopLogo" alt="" class="logo-info" />
            <span class="title">{{shopInfo.name}}</span>
            <div class="other-info">
                <div class="sell-info">
                    <div class="left-info">
                        <p class="sell-data">{{shopInfo.cSell | sellCountFilter}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'DetailShopInfo',
        props:{
            shopInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        // 定义局部过滤器
        filters:{
            // 定义一个 过滤器 来过滤金额 加‘万’字
            sellCountFilter(value){
                if(value < 10000) return value;
                return (value/10000).toFixed(1) + '万';
            }
        },
        mounted() {
            var ssssa = this.shopInfo;
            console.log(ssssa);
        },
    }
</script>
<style scope>
  #shopInfo {
    padding: 20px 10px;
    border-bottom: 3px solid #f2f5f8;
  }
  .logo-info {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #999;
    vertical-align: middle;
  }
  .title {
    font-size: 13px;
    color: #666;
    margin-left: 10px;
  }
  .other-info {
    display: flex;
    /* padding-top: 30px; */
  }
  .other-info > div {
    flex: 1;
  }
  .other-info {
    margin-top: 10px;
  }
  /* 左边店铺详情 */
  .sell-info {
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #666;
    height: 43px;  /*为了我们的高度不被右边影响到*/
     border-right: 1px solid #cccccc;
  }
  .sell-word {
    font-size: 12px;
    margin-top: 6px;
  }
  /* 右边描述部分 */
  .score-info {
    font-size: 12px;
    position: relative;
    top: -11px;
    left: 15px;
    color: #666;
  }
  .score-info-detail {
      padding: 4px;
  }
  .score-info-detail > span {
    margin-left: 5px;
  }
  .isBetter {
    background-color: red !important;
  }
  .baseClass {
    color: white;
    padding: 1px;
    background-color: green;
    position: absolute;
    right: 35px;
  }
  /* 按钮 */
  .btn{
    text-align: center;
  }
  .btn button {
    /* 去掉默认样式 */
    border: none;
    outline: none;
    width: 120px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    background-color: #f2f5f8;
    border-radius: 8px;
    color: #666;
  }
</style>